<%- include('../layout') %>

<% contentFor('body') { %>
<% currentPath = '/animals' %>
<div class="container-fluid">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h2><%= animal.name %> - 图片管理</h2>
    <a href="/admin/animals" class="btn btn-secondary">返回动物列表</a>
  </div>
  
  <!-- 添加图片表单 -->
  <div class="card mb-4">
    <div class="card-body">
      <form action="/admin/animals/<%= animal.id %>/images/add" method="post" class="row g-3">
        <div class="col-md-8">
          <label for="imageUrl" class="form-label">图片URL *</label>
          <input type="text" class="form-control" id="imageUrl" name="imageUrl" required>
        </div>
        <div class="col-md-3">
          <label class="form-check-label">
            <input type="checkbox" class="form-check-input mt-3" name="isExclusive"> 会员专属
          </label>
        </div>
        <div class="col-md-1">
          <button type="submit" class="btn btn-success w-100 mt-1">添加</button>
        </div>
      </form>
    </div>
  </div>
  
  <!-- 图片列表 -->
  <div class="card">
    <div class="card-body">
      <% if (images.length > 0) { %>
      <div class="row">
        <% images.forEach(image => { %>
        <div class="col-md-3 mb-4">
          <div class="card h-100">
            <img src="<%= image.imageUrl %>" class="card-img-top" style="height: 200px; object-fit: cover;" alt="动物图片">
            <div class="card-body">
              <div class="d-flex justify-content-between items-center">
                <span class="badge <%= image.isExclusive ? 'bg-primary' : 'bg-secondary' %>">
                  <%= image.isExclusive ? '会员专属' : '普通图片' %>
                </span>
                <a href="/admin/animals/<%= animal.id %>/images/delete/<%= image.id %>" class="btn btn-danger btn-sm" onclick="return confirm('确定要删除该图片吗？')">
                  <i class="fa fa-trash"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
        <% }); %>
      </div>
      <% } else { %>
      <p class="text-center text-muted">暂无额外图片，点击上方添加按钮添加图片</p>
      <% } %>
    </div>
  </div>
</div>
<% } %>